<template>
  <div :class="$style.root">
    <div :class="$style['pad--title']">{{ title }}</div>
    <div :class="$style['pad--content']" @click="open">
      <img v-if="imgSrc" :src="imgSrc" alt="" :class="$style['pad--img']" />
      <div v-else>Please click here to sign</div>
    </div>
    <div :class="$style['pad--modal']" v-if="modalShow">
      <div :class="$style['modal--inner']" @click.self="close">
        <!--        <div :class="$style['modal&#45;&#45;mask']"></div>-->
        <div :class="$style['modal--wrapper']">
          <div :class="$style['modal--header']">
            <div :class="$style['modal--title']">Please Sign Below</div>
            <div @click="close" :class="$style['icon--close']"></div>
          </div>
          <div :class="$style['modal--body']">
            <div :class="$style['modal--body-inner']">
              <VueSignaturePad
                :class="$style['pad']"
                width="800px"
                height="400px"
                ref="signaturePad"
                :options="options"
              />
            </div>
          </div>
          <div :class="$style['modal--footer']">
            <div :class="$style['footer--left']">
              <a
                @click="clear"
                :class="$style['btn--text']"
                href="javascript: null;"
                >Clear</a
              >
            </div>
            <div :class="$style['footer--right']">
              <button @click="save" :class="$style['btn--primary']">
                Save
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

import VueSignaturePad from "vue-signature-pad";

Vue.use(VueSignaturePad);
export default {
  name: "lcap-stt",
  props: {
    title: {
      type: String,
      default: "签名板",
    },
  },
  data() {
    return {
      options: {
        penColor: "#000",
        minWidth: 2, //控制画笔最小宽度
        maxWidth: 2, //控制画笔最大宽度
      },
      modalShow: false, // 手写弹窗 展示/关闭
      imgSrc: "", // 手写内容生成图片
    };
  },
  methods: {
    open() {
      this.modalShow = true;
      this.$emit('open')
    },
    close() {
      this.modalShow = false;
    },
    //清除
    clear() {
      this.$refs.signaturePad.clearSignature();
    },
    //保存
    save() {
      console.log(this.$refs.signaturePad.saveSignature());
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      this.imgSrc = data;
      this.modalShow = false;
      this.$emit('save', data)
    },
  },
};
</script>

<style module>
.root {
}
.pad--title {
  display: inline-block;
  width: auto;
  padding: 5px 10px;
  text-align: center;
  background-color: #3d5ce6;
  color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.pad--content {
  width: 200px;
  height: 60px;
  border: 3px solid #3d5ce6;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e7edf6;
  cursor: pointer;
}
.pad--img {
  width: 100%;
  height: 100%;
}
.pad--modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.modal--inner {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal--mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal--wrapper {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.modal--header {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #e1e1e1;
}
.modal--title {
  flex: 1;
  padding: 0 20px;
  font-size: 15px;
  color: #333;
}
.icon--close {
  width: 60px;
  padding-right: 10px;
  height: 50px;
  background: url("")
    no-repeat center/ 15px;
  cursor: pointer;
}
.modal--body {
  width: 100%;
  flex: 1;
  padding: 20px;
}
.modal--body-inner {
  border: 2px solid #c1cbd7;
}
.pad {
  background-color: #f4f8f8;
}
.modal--footer {
  border-top: 1px solid #e1e1e1;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.footer--left {
  flex: 1;
}
.footer--right {
}
.btn--text {
  color: #5781fc;
}
.btn--primary {
  background-color: #5781fc;
  color: #fff;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  padding: 5px 12px;
  border: none;
}
</style>
